<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="keywords" content="摇饭器,小工具">
    <meta name="description" content="本页面是一个摇饭器">
    <title>摇饭器3.0</title>
    <div th:replace="tools/_fragments-tools::basicrefrence"></div>
</head>
<body>

<nav th:replace="tools/_fragments-tools::head"></nav>
<div class="ui teal message" style="display: none;z-index:9999;float: left; position: relative;left: 50%;margin-left: -50px;">这是一个自动消失的提示框</div>
<div style="padding-top: 50px;padding-bottom: 50px;padding-left: 15%;padding-right: 15%;">
    <div class="ui center aligned mobile stackable segment">
        <div class="ui container">
            <div class="ui middle aligned center aligned mobile stackable grid">
                <div class="column">
                    <h2 class="ui teal image header">
                        <img src="../images/eat.gif" class="image">
                        <div class="content">
                            饿了,整点吃的?
                        </div>
                    </h2>
                    <form class="ui large form" method="post" action="#">
                        <div class="ui stacked segment">

                            <div class="field">
                                <div class="ui input">
                                    <input type="text" id="newFood" placeholder="没有你想要的？可以自己添加喔...">
                                </div>
                            </div>

                            <div class="field">

                            </div>

                            <button id="btn" type="button" class="ui fluid large teal submit button">
                                开始摇/添加食物
                            </button>
                        </div>

                        <div class="ui center aligned basic segment">
                            <div class="m-padding-lr">
                                <button id="startFlatteryBtn" type="button"
                                        class="ui large orange basic circular label">我觉得可以
                                </button>
                                <div class="ui flowing popup top transition hidden startFlattery">
                                    <div class="ui orange basic label">
                                        <div class="ui images">
                                            <img src="../images/niuPi.jpg"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ui page dimmer">
    <i style="color: #95958a" class="huge utensil spoon icon"></i>
    <div class="content">
        <h1 style="color:teal" id="foodSegment">Hello</h1>
    </div>
</div>


<footer th:replace="tools/_fragments-tools::foot"></footer>

<script type="text/javascript">
    $('.ui.dropdown').dropdown();

    $("#startFlatteryBtn").popup({
        popup: $(".startFlattery.popup"),
        on: 'click'
    })

    $("#howToUse").popup({
        popup: $(".howToUse-pop.popup"),
        on: 'click',
        position: 'right center'
    })

    var foodList = null;
    $(function () {
        $.ajax({
            url:"shakeRice/getAllName",
            success: function (resp) {
                foodList = resp.data;
            }
        })
    })

    function messageDisplay(content) {
        // 显示并自动隐藏 Message 组件
        $('.ui.message')
            .text(content)
            .fadeIn('slow')
            .delay(1000)  // 设置显示时间，单位是毫秒
            .fadeOut('slow', function() {
                // 隐藏后移除 Message 组件
                $(this).css("display","none");
            });
    }


    $("#btn").click(function () {
        var newFood = $("#newFood").val();
        if (newFood != null && newFood.length !== 0) {
            $.ajax({
                url: "shakeRice/addFood",
                data: {
                    food: newFood,
                },
                success: function (resp) {
                    if (resp.code === 0) {
                        messageDisplay(resp.msg);
                    }else {
                        messageDisplay(resp.data);
                    }
                    $("#newFood").val("");
                    $.ajax({
                        url:"shakeRice/getAllName",
                        success: function (resp) {
                            foodList = resp.data;
                        }
                    })
                }
            })
        }else {
            var index = Math.floor(Math.random() * foodList.length);
            $("#foodSegment").text(foodList[index]);
            $('.page.dimmer').dimmer('show');
        }
    })
</script>

</body>
</html>